<template>
  <div class="container">
    <el-tabs v-model="activeName">
      <el-tab-pane name="displaySetting" label="统计设置">
        <div class="setting">
          <div class="tableData changeStylePage">
            <div v-for="(item, index) in newData" :key="index" class="tableRow">
              <div class="table-left statistics_div">
                <div class="switch">
                  <el-switch
                    v-model="item.isShow"
                    active-color="#13ce66"
                    inactive-color="#999999"
                    @change="changeState"
                  />
                </div>
                <div class="name">{{ item.name }}</div>
                <el-input v-if="'number' in item" v-model="item.number" />
              </div>
              <div class="line" />
              <div class="table-right">
                <svg-icon icon-class="drag2" />
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane name="searchField" label="图表设置">
        <div class="setting">
          <div class="tableData2 changeStyleSearch">
            <div v-for="(item, index) in newData2" :key="index" class="tableRow">
              <div class="table-left">
                <div class="switch">
                  <el-switch
                    v-model="item.isShow"
                    active-color="#13ce66"
                    inactive-color="#999999"
                  />
                </div>
                <div class="name">{{ item.name }}</div>
                <!--                <div v-if="'number' in item" style="padding-right:20px">-->
                <!--                  <el-input v-model="item.number" placeholder="目标值" />-->
                <!--                </div>-->
                <div v-if="'number' in item" class="customization">
                  <div class="customization_name">
                    预警值：
                  </div>
                  <div class="customization_value">
                    <el-input
                      v-model="item.number"
                      placeholder="请输入"
                      type="number"
                    >
                      <template slot="append">%</template>
                    </el-input>
                  </div>
                </div>
                <div v-else-if="'threshold' in item" class="customization">
                  <div class="customization_name">
                    阈值：
                  </div>
                  <div class="customization_value">
                    <el-input
                      v-model="item.threshold"
                      placeholder="请输入"
                      type="number"
                    />
                  </div>
                </div>
                <div v-else-if="'deviceIds' in item" class="customization">
                  <div class="customization_name">
                    设备：
                  </div>
                  <div class="customization_value">
                    <el-select
                      v-model="item.deviceIds"
                      multiple
                      collapse-tags
                      multiple-limit="4"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item2 in deviceOptions"
                        :key="item2.companyDeviceId"
                        :label="item2.iotType+':'+item2.deviceName"
                        :value="item2.companyDeviceId"
                      />
                    </el-select>
                  </div>
                </div>
                <div v-else class="customization" />
              </div>
              <div class="line" />
              <div class="table-right">
                <svg-icon icon-class="drag2" />
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="bottomBtn">
      <div class="right-button">
        <el-button @click.stop="backDefault">恢复默认</el-button>
        <el-button type="cancel" @click.stop="cancel">取消</el-button>
        <el-button @click.stop="onSubmit">保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { savePageSettings, backDefault } from '@/api/common/common'
import { mapGetters } from 'vuex'
import Sortable from 'sortablejs'
import { realStatusList as getDeviceOptions } from '@/api/superManage/iotManage/iotConfiguration'
export default {
  props: {
    layerid: {},
    settingData: {}
  },
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  data() {
    return {
      activeName: 'displaySetting',
      StatisticsItem: [],
      ChartItem: [],
      pageData: {
        isAll: 0,
        // iotType: '电表',
        pageNum: 1,
        pageSize: 9999,
        orderByColumn: 'updateTime',
        isAsc: 'desc'
      },
      optionData: [],
      settingDatas: {},
      newData: [],
      newData2: [],
      deviceOptions: []
    }
  },
  mounted() {
    const StatisticsItemCache = JSON.parse(JSON.stringify(this.settingData.StatisticsItem)) // 解决传值过来无法修改值的bug
    const ChartItemCache = JSON.parse(JSON.stringify(this.settingData.ChartItem)) // 解决传值过来无法修改值的bug
    StatisticsItemCache.forEach(item => {
      if ('isShow' in item == false) {
        item.isShow = true
      }
    })
    ChartItemCache.forEach(item => {
      if ('isShow' in item == false) {
        item.isShow = true
      }
    })
    this.newData = this.$deepClone(StatisticsItemCache)
    this.newData2 = this.$deepClone(ChartItemCache)
    this.$nextTick(() => {
      this.rowDrop()
      this.rowDrop2()
    })

    this.getDeviceOptions()
  },
  methods: {
    getDeviceOptions() {
      getDeviceOptions(this.pageData).then(res => {
        this.deviceOptions = res.data
      })
    },
    rowDrop() {
      // 此时找到的元素是要拖拽元素的父容器
      const tbody = document.querySelector('.tableData')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const cacheData1 = _this.$deepClone(_this.newData[oldIndex])
          const cacheData2 = _this.$deepClone(_this.newData[newIndex])
          const cacheTableData = _this.$deepClone(_this.newData)
          cacheTableData[newIndex] = cacheData1
          cacheTableData[oldIndex] = cacheData2
          _this.newData = []
          setTimeout(() => { // 加延时重置表格
            _this.newData = cacheTableData
          }, 20)
        }
      })
    },
    rowDrop2() {
      // 此时找到的元素是要拖拽元素的父容器
      const tbody = document.querySelector('.tableData2')
      const _this = this
      Sortable.create(tbody, {
        // draggable: ".el-table__row",
        onEnd({ newIndex, oldIndex }) {
          const cacheData1 = _this.$deepClone(_this.newData2[oldIndex])
          const cacheData2 = _this.$deepClone(_this.newData2[newIndex])
          const cacheTableData = _this.$deepClone(_this.newData2)
          cacheTableData[newIndex] = cacheData1
          cacheTableData[oldIndex] = cacheData2
          _this.newData2 = []
          setTimeout(() => { // 加延时重置表格
            _this.newData2 = cacheTableData
          }, 20)
        }
      })
    },
    changeState() {
    },
    cancel() {
      this.$layer.close(this.layerid) // 关闭弹框
    },
    // 提交
    onSubmit() {
      if (this.newData.filter(item => item.isShow).length > 8) {
        this.$message({
          message: '最多展示 8 项统计数据',
          type: 'warning'
        })
        return
      }

      const submitData = {}
      this.settingDatas.StatisticsItem = this.$deepClone(this.newData)
      this.settingDatas.ChartItem = this.$deepClone(this.newData2)
      submitData.id = this.settingData.id
      submitData.userId = this.userId
      submitData.pageId = this.settingData.pageId
      submitData.json = JSON.stringify(this.settingDatas)
      savePageSettings(submitData).then(res => {
        this.$message({
          message: res.msg,
          type: 'success'
        })
        // this.$layer.close(this.layerid) // 关闭弹框
        // this.$parent.getPageSettings() // 调用父组件的方法
        setTimeout(() => {
          location.reload() // 直接刷新页面吧
        }, 1000)
      })
    },
    backDefault() {
      backDefault({ userId: this.userId, pageId: this.settingData.pageId }).then(res => {
        this.$message({
          message: res.msg,
          type: 'success'
        })
        // this.$layer.close(this.layerid) // 关闭弹框
        // this.$parent.getPageSettings() // 调用父组件的方法

        location.reload() // 直接刷新页面吧
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-input-number.is-controls-right span {
  display: inline-block;
  height: 15px;
  width: 24px;
  line-height: 15px;
}
/deep/ .el-input-number .el-input {
  margin-top: -2px;
}
/deep/ .el-input--medium .el-input__inner {
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
}
/deep/ .el-input-number--medium{
  line-height: 35px;
}

.changeStylePage /deep/ .el-input-number.is-controls-right .el-input__inner{
  padding-right: 34px;
  width: 120px;
}
.changeStyleSearch /deep/ .el-input {
  width: 140px;
}
/deep/ .svg-icon {
  height: 20px;
  width: 22px;
}
/deep/ .el-form-item__label {
  font-size: 14px !important;

  font-weight: 400;
  color: #666666;
  width: 150px;
}
.num{
  .el-input,.el-select, .el-date-editor.el-input{
    width: 140px !important;
  }
  /deep/ .el-input__suffix{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

}
.changeStylePage /deep/ .el-input{
  width: 220px;
}
.container {
  width: 100%;
  overflow: hidden;
  .setting {
    //height: 650px;
    width: 100%;
    padding: 25px 20px 24px 20px;
    //overflow-y: auto;
    height: 100%;
    .tips {
      margin-bottom: 21px;
      font-size: 14px;

      font-weight: 400;
      color: #666666;
    }
    .tableRow {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      &:nth-child(even) {
        background: #F7FAFF;
      }
      &:nth-child(odd) {
        background: #EBF2FF;
      }
      .table-left {
        height: 40px;
        flex: 1;
        border-right: 1px solid #efefef;
        // margin-right: 1px;
        // padding: 5px 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        .switch {
          margin: 0 24px;
        }
        .name {
          width: 150px;
          text-align: center;
          font-size: 14px;

          font-weight: 400;
          color: #333333;
        }
        .num {
          margin: 20px;
        }
      }
      //   .line{
      //       height: 40px;
      //       width: 1px;
      //   }
      .table-right {
        height: 40px;
        width: 80px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .bottomBtn {
    padding: 20px;
    height: 70px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    .left-button {
      font-size: 14px;

      font-weight: 400;
      color: #666666;
      display: flex;
      flex-direction: row;
      align-items: center;
      div {
        cursor: pointer;
      }
      .openAll {
        margin-right: 20px;
      }
    }
  }
}
.el-tab-pane{
  justify-content: center;
}
.container /deep/ .el-input{
  padding-right: 0px;
}
/deep/ .el-tabs__header{
  margin: 0px;
}
.setting{
  box-shadow: inset 0px 0px 12px 0px rgba(29, 65, 134, 0.18);
}
/deep/ .el-tabs{
  height: calc(100% - 70px);
  .el-tabs__content{
    height: calc(100% - 50px);
  }
  .changeStyleSearch{
    overflow-y: auto;
    height: 100%;
  }
}
.customization{
  display: flex;flex: 1;margin-right: 10px;
  .customization_name{
    width: 100px;padding-right: 10px;
    display: flex;align-items: center;justify-content: flex-end;
  }
  .customization_value{
    flex: 1;
    display: flex;align-items: center;
    /deep/ .el-input{
      width: 100%;
    }
  }
}
.statistics_div{
  .name{
    flex: 1;
  }
}
</style>
